<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏大厅</title>
    <style>
        body
        {
            display: grid;
            align-items: center;
            padding: 20px;
            margin: 0;
            background:linear-gradient(to right,rgb(58, 55, 55),rgb(255, 255, 255),rgb(58, 55, 55));
        }

        .container
        {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            min-height: 300px;
        }

        .left
        {
            display: grid;
            grid-template-rows: 1fr 1fr;
            gap: 20px;
        }

        .user_message_box
        {
            width: 700px;
            height: 400px;
            border: 5px solid rgb(228, 217, 217);
            box-sizing: border-box;
            background: rgb(170, 84, 84);
            position: relative;
            top: 50px;
            border-radius: 10px;
        }

        .message_box
        {
            position: relative;
            top: 150px;
            left: 50px;
        }

        .message
        {
            font-size: 30px;
        }

        .game_box
        {
            width: 700px;
            height: 300px;
            border: 5px solid rgb(228, 217, 217);
            box-sizing: border-box;
            background: rgb(170, 84, 84);
            margin-top: 100px;
            border-radius: 10px;
        }

        .game_begin_box
        {
            position: relative;
            top: 100px;
            left: 100px;
        }

        .game_begin
        {
            width: 200px;
            height: 60px; 
            font-size: 20px;
            color:white;
            background-color: rgb(56, 139, 235);
            border: 0px;
            border-radius: 10px;
        }



        .status_box
        {
            width: 1000px;
            height: 70px;
            border: 5px solid rgb(228, 217, 217);
            box-sizing: border-box;
            background: rgb(255, 255, 255);
        }

    </style>
</head>
<body>
    <div class="container">
    <div class="left">
    <div class="user_message_box">
        <div class="message_box">
            <p class="message" id="message">123321</p><br>
        </div>
    </div>
    <div class="game_box">
        <div class="game_begin_box">
            <button class="game_begin" id="game_begin" onclick="gaming()">开始匹配</button>
        </div>
    </div>

    <div class="status_box">
        <h class="status" id="status"></h>
    </div>
    
    <script>
        var ws_url="ws://47.101.42.147:8080/hall";
        var ws_hdl=null;
        var button_flag="begin";

        window.onbeforeunload = function() {
            ws_hdl.close();
        }

        function gaming()
        {
            var req_json;
            if(button_flag=="begin")
            {
                document.getElementById("game_begin").textContent="匹配中,点击取消匹配";
                button_flag="stop";
                req_json={optype:"match_start"};
                ws_hdl.send(JSON.stringify(req_json));
            }
            else if(button_flag=="stop")
            {
                document.getElementById("game_begin").textContent="开始匹配";
                button_flag="begin";
                req_json={optype:"match_stop"};
                ws_hdl.send(JSON.stringify(req_json));
            }
        }


        function get_user()
        {
            fetch('/info', {
                method: 'GET',
                credentials: "include",
                headers: {
                'Content-Type': 'application/json'},
            })
            .then(response => {
                if (response.status === 200) {
   
                }
                return response.json();
            })
            .then(data => {
                showMassage("message",data);
            }) 
        }

        function showMassage(elementId, data) 
        {
            const errorElement = document.getElementById(elementId);
            var info_html = "id:" + data.id + "⽤⼾：" + data.name + " 积分："
            + data.score + "⽐赛场次：" + data.total_count + " 获胜场次：" + data.win_count;
            errorElement.textContent = info_html;
        }

        function get_websocket()
        {
            ws_hdl=new WebSocket(ws_url);
            ws_hdl.onopen=ws_onopen;        
            ws_hdl.onclose=ws_onclose;        
            ws_hdl.onerror=ws_onerror;        
            ws_hdl.onmessage=ws_onmessage;    
        }

        function ws_onopen()
        {

        }

        function ws_onclose()
        {

        }

        function ws_onerror()
        {

        }

        function ws_onmessage(event)
        {
            var resp_json=JSON.parse(event.data);
            document.getElementById("status").textContent=resp_json.reason;
            if(resp_json.reason=="匹配成功"&&resp_json.optype=="match_success")
            {
                window.location.href = '/game_room.html'; 
            }
        }

        get_user();
        get_websocket();
    </script>
</body>
</html>